<cly-drawer ref="drawer" @submit="onSubmit" class="populator-template-drawer" v-bind="$props.controls" name="populatorTemplate" :title="$props.titleDescription.header" :saveButtonLabel="$props.titleDescription.button" :size="6">
    <template v-slot:default="drawerScope">
        <cly-form-step id="create-template-step">
            <div class="cly-vue-drawer-step__section">
                <div class="text-button font-weight-bold bu-mb-2">{{ i18n('populator.template-name') }}</div>
                <validation-provider name="name" rules="required" v-slot="v">
                    <el-input class="bu-is-shadowless" style="margin-bottom: 20px" :class="{'is-error': v.errors.length > 0}" :placeholder="i18n('populator.template-name-placeholder')" v-model="drawerScope.editedObject.name"></el-input>
                </validation-provider>
            </div>
            <div class="cly-vue-drawer-step__section">
                <h4 class="bu-mb-4">{{ i18n('populator.custom-user-props') }}</h4>
                <div :key="index" class="populator-template-drawer__main-container bu-py-3 bu-px-4" v-for="(upItem, index) in drawerScope.editedObject.up" >
                    <div class="bu-is-flex bu-is-justify-content-space-between bu-is-align-items-center bu-mb-3">
                        <div class="text-small text-uppercase populator-template-drawer__text-custom-detail" >{{ i18n('populator-add-custom-prop-detail') }}</div>
                        <el-button @click="removeLineProperty(drawerScope.editedObject, index, 'custom')" :disabled="drawerScope.editedObject.up[index].length === 0" v-bind:style="[drawerScope.editedObject.up.length < 2 ? {'cursor': 'not-allowed !important', 'background-color': 'transparent !important', 'opacity' : '.5 !important'} : {}]" class="text-medium populator-template-drawer__btn-delete" type="text">{{ i18n('populator.delete-property')}}</el-button>
                    </div>
                    <div class="bu-is-flex populator-template-drawer__property-container bu-mb-2">
                        <div class="populator-template-drawer__key bu-is-flex bu-mb-2 bu-is-flex-direction-column">
                            <div class="text-key bu-mb-2">
                                {{ i18n('populator.user-prop-key') }}
                                <cly-tooltip-icon></cly-tooltip-icon>
                            </div>
                            <div>
                                <el-input :placeholder="i18n('populator.enter-your-key','')" v-model="drawerScope.editedObject.up[index].key"></el-input>
                            </div>
                        </div>
                        <div class="populator-template-drawer__values bu-is-flex bu-is-flex-direction-column bu-ml-2">
                            <div class="text-values bu-mb-2">
                                {{ i18n('populator.user-prop-values') }}
                                <cly-tooltip-icon></cly-tooltip-icon>
                            </div>
                            <div>
                                <el-select class="custom-value" @change="addedTag" :collapse-tags="false" :placeholder="i18n('populator.enter-your-values')" v-model="drawerScope.editedObject.up[index].value" multiple filterable allow-create></el-select>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="typeof drawerScope.editedObject.up !== 'undefined'">
                    <el-button class="populator-template-drawer__btn-add bg-light-blue-100 bu-mt-5 text-smallish font-weight-bold color-blue-100 el-button--text" v-bind:style="[drawerScope.editedObject.up[drawerScope.editedObject.up.length-1].key === '' ? {'color' : '#81868d !important' , 'cursor' : 'no-drop'} : {'color' : '#0166d6 !important'}]" @click="addUserProperty(drawerScope.editedObject)">{{ i18n('populator.add-custom-prop') }}</el-button>
                </div>
                <!-- <el-button class="populator-template-drawer__btn-add bg-light-blue-100 bu-mt-5 text-smallish font-weight-bold color-blue-100 el-button--text" @click="addUserProperty(drawerScope.editedObject)">{{ i18n('populator.add-custom-prop') }}</el-button> -->
                <h4 class="bu-mb-4">{{ i18n('populator.events') }}</h4>
                <div class="populator-template-drawer__main-container bu-py-2 bu-px-4 bu-mt-4" v-for="(eventItem, index) in drawerScope.editedObject.events">
                    <div class="bu-is-flex bu-is-justify-content-space-between bu-is-align-items-center bu-mb-3 bu-mt-2">
                        <div class="text-small text-uppercase populator-template-drawer__text-custom-detail" >{{ i18n('populator.event-details') }}</div>
                        <el-button class="text-medium populator-template-drawer__btn-delete" :disabled="drawerScope.editedObject.events.length < 2" @click="removeLineProperty(drawerScope.editedObject, index, 'event')" type="text">{{ i18n('populator.delete-event')}}</el-button>
                    </div>
                    <div class="populator-template-drawer__property-container bu-mb-4">
                        <div class="populator-template-drawer__key bu-mb-2">
                            <div class="text-key bu-mb-2">
                                {{ i18n('populator.event-key') }}
                                <cly-tooltip-icon></cly-tooltip-icon>
                            </div>
                            <div>
                                <el-input  class="bu-is-shadowless" v-model="drawerScope.editedObject.events[index].eventName" :placeholder="i18n('populator.enter-your-event-key','event')"></el-input>
                            </div>
                            <div class="bu-is-flex populator-template-drawer__property-container bu-mt-4" v-for="(segmentItem, segmentIndex) in drawerScope.editedObject.events[index].segments">
                                <div class="populator-template-drawer__key bu-is-flex bu-is-flex-direction-column">
                                    <div class="text-key bu-mb-2">
                                        {{ i18n('populator.segmentation-key') }}
                                        <cly-tooltip-icon></cly-tooltip-icon>
                                    </div>
                                    <div>
                                        <el-input v-model="drawerScope.editedObject.events[index].segments[segmentIndex].key"></el-input>
                                    </div>
                                </div>
                                <div class="populator-template-drawer__values bu-is-flex bu-is-flex-direction-column bu-ml-2">
                                    <div class="text-values bu-mb-2">
                                        {{ i18n('populator.segmentation-values') }}
                                        <cly-tooltip-icon></cly-tooltip-icon>
                                    </div>
                                    <div>
                                        <el-select v-model="drawerScope.editedObject.events[index].segments[segmentIndex].value" @change="addedTag" class="custom-value" :collapse-tags="false" multiple filterable allow-create></el-select>
                                    </div>
                                </div>
                                <div class="bu-is-flex bu-is-flex-direction-column bu-ml-2 bu-is-justify-content-center">
                                    <el-button class="bu-mt-4" type="danger" size="mini" v-bind:style="[drawerScope.editedObject.events[index].segments.length < 2 ? {'opacity': '.5'} : {}]" icon="el-icon-delete" circle :disabled="drawerScope.editedObject.events[index].segments.length < 2" @click="removeSegmentationProperty(drawerScope.editedObject, index, segmentIndex)"></el-button>
                                </div>
                            </div>
                            <div>
                                <el-button :disabled="isAddSegmentationDisabled(drawerScope.editedObject, index)" class="bu-mb-4 font-weight-bold populator-template-drawer__btn-segmentation" type="text" @click="addSegmentationProperty(drawerScope.editedObject, index)">{{ i18n('populator.add-segmentation') }}</el-button>
                            </div>
                            <div class="bu-container populator-template-drawer__event-container">
                                <div class="bu-columns bu-p-3">
                                    <div class="event-left-container bu-level-left bu column bu-is-6">
                                        <el-checkbox v-model="drawerScope.editedObject.events[index].checkedEventProperties.duration">{{ i18n('populator.duration-help-title') }}</el-checkbox>
                                        <span class="duration-text">{{ i18n('populator.duration-help-subtitle') }}</span>
                                    </div>
                                    <div class="event-right-container bu-level-right bu-column bu-is-5 bu-is-align-items-start"">
                                        <el-input :disabled="!drawerScope.editedObject.events[index].checkedEventProperties.duration" v-model="drawerScope.editedObject.events[index].duration[0]" class="bu-is-shadowless event-input"></el-input> 
                                        <span class="bu-p-1">-</span>
                                        <el-input :disabled="!drawerScope.editedObject.events[index].checkedEventProperties.duration" class="bu-is-shadowless event-input" v-model="drawerScope.editedObject.events[index].duration[1]"></el-input>
                                    </div>
                                </div>
                                <div class="bu-columns bu-p-3">
                                    <div class="event-left-container bu-level-left bu column bu-is-6">
                                        <el-checkbox v-model="drawerScope.editedObject.events[index].checkedEventProperties.sum">{{ i18n('populator.sum-help-title') }}</el-checkbox>
                                        <span class="duration-text">{{ i18n('populator.sum-help-subtitle') }}</span>
                                    </div>
                                    <div class="event-right-container bu-level-right bu-column bu-is-5 bu-is-align-items-start"">
                                        <el-input :disabled="!drawerScope.editedObject.events[index].checkedEventProperties.sum" class="bu-is-shadowless event-input" v-model="drawerScope.editedObject.events[index].sum[0]"></el-input> 
                                        <span class="bu-p-1">-</span>
                                        <el-input :disabled="!drawerScope.editedObject.events[index].checkedEventProperties.sum" class="bu-is-shadowless event-input" v-model="drawerScope.editedObject.events[index].sum[1]"></el-input>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <el-button :disabled="isAddEventDisabled(drawerScope.editedObject)" class="bu-mt-4 bg-light-blue-100 text-smallish font-weight-bold color-blue-100 el-button--text  el-button--default" @click="addEventProperty(drawerScope.editedObject)">{{ i18n('populator.add-event') }}</el-button>
            </div>
        </div>
        </cly-form-step>
    </template>
</cly-drawer>
